import React, { FC, useEffect, useState } from 'react'
import { Form, Input, Button } from 'antd'
import { queryCaseItems } from '~/api/upload-item-api'
import { useLocation } from 'react-router-dom'

import WaitingList from './container/waiting-list'

interface QueryListProps {
  caseName?: string
  caseNo?: string
}

const ItemDetail: FC = () => {
  const [form] = Form.useForm()
  const [waitList, setWaitList] = useState([])
  const { state }: any = useLocation()
  const { resetFields } = form

  const { caseNo } = state

  const handleGetQueryWaitList = async () => {
    const { data } = await queryCaseItems({
      itemOptType: 'TRANSFER',
      caseNo
    })

    setWaitList(data)
  }

  const onFinish = () => {
    handleGetQueryWaitList()
  }

  const handleInitData = () => {
    handleGetQueryWaitList()
  }

  useEffect(() => {
    handleInitData()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return (
    <div>
      <header>
        <Form validateTrigger="onBlur" layout="inline" form={form} onFinish={onFinish}>
          <Form.Item name="caseNo" label="物品编号：" initialValue={null}>
            <Input placeholder="请输入案件编号搜索" />
          </Form.Item>
          <Form.Item name="caseName" label="物品名称：" initialValue={null}>
            <Input placeholder="请输入案件名称搜索" />
          </Form.Item>
          <Form.Item>
            <Button htmlType="submit" type="primary">
              查询
            </Button>
            <Button
              onClick={() => {
                console.log('reset')
                resetFields()
                handleInitData()
              }}
              style={{ padding: 0, marginLeft: 8 }}
              type="link"
            >
              清空选项
            </Button>
          </Form.Item>
        </Form>
      </header>
      <main style={{ marginTop: 21 }}>
        <WaitingList waitList={waitList} />
      </main>
    </div>
  )
}

export default ItemDetail
